<template>
  <div class="container">
    <div class="app-container">
      <div class="search">
        <el-form class="search-form">
          <el-form-item label="设备编号：" label-width="100px">
            <el-input
              v-model="pageParams.innerCode"
              placeholder="请输入"
              style="width: 200px"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              class="search-btn"
              size="mini"
              type="primary"
              icon="el-icon-search"
              @click="searchVm"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="list">
        <div class="btns">
          <el-button
            type="primary"
            class="add-btn"
            icon="el-icon-circle-plus-outline"
            @click="showAddDialog = true"
            >新建</el-button
          >
          <el-button class="setting-btn" @click="setFn">批量操作</el-button>
        </div>
        <el-table
          :data="tableData"
          @selection-change="handleSelectionChange"
          style="width: 100%"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column width="80px" label="序号">
            <template v-slot="{ row }"> {{ row.index }} </template>
          </el-table-column>
          <el-table-column prop="innerCode" label="设备编号"> </el-table-column>
          <el-table-column prop="type.name" label="设备型号"> </el-table-column>
          <el-table-column label="详细地址" v-slot="{ row }">
            <template>
              {{ row.node.addr.split("-").splice(3).join("") }}
            </template>
          </el-table-column>
          <el-table-column prop="ownerName" label="合作商"> </el-table-column>
          <el-table-column label="设备状态" v-slot="{ row }">
            <template>
              {{
                row.vmStatus === 0
                  ? "未投放"
                  : row.vmStatus === 1
                  ? "运营"
                  : row.vmStatus === 3
                  ? "撤机"
                  : ""
              }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="{ row }">
              <el-button
                type="text"
                @click="getGoods(row.innerCode, row.vmType, row.businessId)"
                >货道</el-button
              >
              <el-button type="text" @click="getPolicy(row.innerCode)"
                >策略</el-button
              >
              <el-button type="text" @click="editVm(row)">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="space-between" style="margin-top: 20px">
          <span class="pageCount"
            >共{{ pageParams.totalCount }}条记录 第{{ pageParams.pageIndex }}/{{
              pageParams.totalPage
            }}页</span
          >
          <el-pagination
            layout="slot"
            :current-page.sync="pageParams.pageIndex"
            :page-size="pageParams.pagesize"
            :total="pageParams.totalPage"
          >
            <el-button
              type="primary"
              :disabled="pageParams.pageIndex === 1 ? true : false"
              class="pagi-btn"
              :class="{ disabled: pageParams.pageIndex === 1 }"
              @click="goPrev"
              >上一页</el-button
            >
            <el-button
              type="primary"
              :disabled="
                pageParams.pageIndex === pageParams.totalPage ? true : false
              "
              :class="{
                disabled: pageParams.pageIndex === pageParams.totalPage,
              }"
              class="pagi-btn"
              @click="goNext"
              >下一页</el-button
            >
          </el-pagination>
        </el-row>
      </div>
      <!-- 弹窗 -->
      <addVm
        v-if="showAddDialog"
        :isShow.sync="showAddDialog"
        @searchVm="searchVm"
      />
      <vmsetting
        v-if="showSetDialog"
        :isShow.sync="showSetDialog"
        :selectedCodes="selectedCodes"
      />
      <editVm
        v-if="showInfoDialog"
        :vmNow="vmNow"
        :isShow.sync="showInfoDialog"
        @searchVm="searchVm"
      />
      <goodsDetail
        v-if="showGoodsDialog"
        :isShow.sync="showGoodsDialog"
        ref="detail"
        :businessId="businessId"
        :innerCode="innerCode"
      />
      <el-dialog
        title="策略管理"
        width="650px"
        :visible.sync="showPolicyDialog"
      >
        <el-form label-width="160px">
          <el-row>
            <el-col :span="10">
              <el-form-item label="机器编号:" prop="innerCode">
                <span>{{ policyNow.innerCode }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="策略名称:" prop="policyName">
                <span>{{ policyNow.policyName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="策略方案:" prop="discount">
                <span>{{ policyNow.discount }}%</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" justify="center">
            <el-col :span="4">
              <el-button
                type="primary"
                class="cancelP-btn"
                @click="cancelPolicy"
                >取消策略</el-button
              >
            </el-col>
          </el-row>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import addVm from "@/views/vm/components/addVm.vue";
import goodsDetail from "@/views/vm/components/goodsDetail.vue";
import vmsetting from "@/views/vm/components/setting.vue";
import editVm from "@/views/vm/components/editVm.vue";
import {
  searchVmApi,
  getPolicyInfoApi,
  cancelVmPolicyApi,
} from "@/api/vm";
export default {
  name: "Business",
  components: {
    addVm,
    vmsetting,
    editVm,
    goodsDetail,
  },
  data() {
    return {
      tableData: [],
      selectedCodes: [],
      policyNow: {},
      taskId: "",
      showPolicyDialog: false,
      showGoodsDialog: false,
      vmNow: {},
      goodsNow: [],
      businessId: null,
      typeNow: {},
      innerCode:'',
      showAddDialog: false,
      showSetDialog: false,
      showInfoDialog: false,
      pageParams: {
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        totalCount: 0,
        innerCode: "",
      },
    };
  },
  created() {
    this.searchVm();
  },
  methods: {
    // 搜索设备
    async searchVm() {
      const res = await searchVmApi({
        ...this.pageParams,
      });
      this.tableData = [...res.currentPageRecords];
      this.pageParams.pageIndex = +res.pageIndex;
      this.pageParams.pageSize = +res.pageSize;
      this.pageParams.totalPage = +res.totalPage;
      this.pageParams.totalCount = +res.totalCount;

      // 序号
      let pageNow = this.pageParams.pageIndex;
      this.tableData.forEach((item, index) => {
        this.$set(
          item,
          "index",
          pageNow > 1 ? (pageNow - 1) * 10 + index + 1 : index + 1
        );
      });
    },
    // 策略
    async getPolicy(id) {
      const res = await getPolicyInfoApi(id);
      this.policyNow = res;
      console.log(this.policyNow);
      // 如果res为空，调出设置策略弹窗
      if (!res) {
        this.selectedCodes = [id];
        this.showSetDialog = true;
      } else {
        // 否则调出取消策略弹窗
        this.showPolicyDialog = true;
      }
    },
    // 货道
    async getGoods(id, type, businessId) {
      this.showGoodsDialog = true;
      this.businessId = businessId;
      this.innerCode = id
      this.$nextTick(() => {
        this.$refs.detail.getGoodsDetail(id);
        this.$refs.detail.getVmType(type);
      });
    },
    async cancelPolicy() {
      await cancelVmPolicyApi({
        innerCode: this.policyNow.innerCode,
        policyId: this.policyNow.policyId,
      });
      this.$message.success("取消策略成功");
      this.showPolicyDialog = false;
      this.searchVm();
    },
    editVm(data) {
      this.vmNow = data;
      this.showInfoDialog = true;
    },
    handleSelectionChange(val) {
      if (val.length > 0) {
        this.selectedCodes = val.map((item) => item.innerCode);
      }
    },
    setFn() {
      if (this.selectedCodes.length) {
        this.showSetDialog = true;
      } else {
        this.$message.warning("请勾选售货机！");
      }
    },
    // 上一页
    goPrev() {
      this.pageParams.pageIndex--;
      this.searchVm();
    },
    // 下一页
    goNext() {
      this.pageParams.pageIndex++;
      this.searchVm();
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  background-color: #f8fafd;
  padding: 20px;
  .search {
    background-color: #fff;
    display: flex;
    height: 64px;
    align-items: center;
    padding-top: 23px;
    margin-bottom: 20px;
    .search-form {
      display: flex;
      align-items: center;
      .search-btn {
        background-color: #5f84ff;
        margin-left: 15px;
        font-size: 16px;
        height: 36px;
        width: 80px;
        text-align: center;
        padding: 0;
      }
    }
  }
  .list {
    // height: 673px;
    padding: 20px;
    background-color: #fff;

    .btns {
      margin-bottom: 15px;
    }
    .add-btn {
      width: 80px;
      text-align: center;
      padding: 12px 0px;
      background-color: #ff8035;
      border: none;
      font-size: 14px;
    }
    .setting-btn {
      border: none;
      background-color: #fbf4f0;
      color: #716762;
      width: 80px;
      text-align: center;
      padding: 12px 0px;
    }
    .pageCount {
      color: #dbdfe5;
      margin-left: 10px;
    }
  }
  .pagi-btn {
    background-color: #d5ddf8;
    color: #606266;
    width: 70px;
    height: 32px;
    text-align: center;
  }
  .disabled {
    background-color: #eceff8;
    color: #d2d7dd;
  }
  .cancelP-btn {
    width: 80px;
    height: 36px;
    background-color: #fbf4f0;
    color: #655b56;
    border: none;
    text-align: center;
    padding: 0;
  }
}
</style>
